<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.7.0.min.js"></script>
		<style>
			.ok{
				color: green;
				border: 1px solid green;
			}
			.error{
				color: red;
				border: 1px solid red;
			}
		</style>
		<script>
			function check_code(){
				//获取账号
				var code = $("#code input").val()
				var reg = /^\w{6,12}$/
				if(reg.test(code)){
					//校验通过
					$("#code span").removeClass("error").addClass("ok")
				}else{
					//校验失败
					$("#code span").removeClass("ok").addClass("error")
				}
			}
			$(function(){
				$("#code input").focus()
			})
			function check_code1(){
				//获取账号
				var code = $("#code1 input").val()
				var reg = /^\w{6,12}$/
				if(reg.test(code)){
					//校验通过
					$("#code1 span").removeClass("error").addClass("ok")
				}else{
					//校验失败
					$("#code1 span").removeClass("ok").addClass("error")
				}
			}
			$(function(){
				$("#code1 input").focus()
			})
		</script>
	</head>
	<body>
		<p id="code">
			账号：<input type="text" name="" id="" onblur="check_code()">
			<span>6-12字母数字下划线</span>
		</p>
		<p id="code1">
			密码：<input type="password" onblur="check_code1()">
			<span>8-20字母数字下划线</span>
		</p>
	</body>
</html>